<template>
  <div class="Reportrepair">
  		<el-input
  	        v-model="keyword"
  	        placeholder="请输入姓名关键字"
  	        class="input-with-select"
  			style="width:40%"
  		>
  	        <template #append>				
  	          <el-button @click="search"><el-icon><Search /></el-icon></el-button> 
  	        </template>        
  		</el-input>
  		<el-button primary @click="addInit">登记</el-button>
  		<el-button primary @click="checkReport">查看报修申请</el-button>
		<el-button warning @click="deleteBatch">批量删除</el-button>
		<el-button primary @click="echartsBar">统计图表</el-button> 
  		<p></p>
     <el-table :data="tableData" style="width: 100%" :stripe="true"
  		 ref="multipleTable" :row-style="{height:'20px'}"
  		    @selection-change="handleSelectionChange"
  		    :header-cell-style="{background:'#eef1f6',color:'#606266'}"
  		 >
		<el-table-column min-width="15%" type="selection" align = "center"></el-table-column>
        <el-table-column prop="dorm_no" label="宿舍号" sortable width="90" align = "center" />
        <el-table-column prop="no" label="学号" sortable  align = "center"/>
        <el-table-column prop="name" label="姓名" width="90" align = "center"/>
  		<el-table-column prop="dorm" label="宿舍楼" sortable width="90" align = "center" />
  		<el-table-column prop="report_time" label="报修时间" sortable  align = "center"/>
  		<el-table-column prop="report_reason" label="报修原因"   align = "center"/>
  		<el-table-column prop="handle_sta" label="处理状态"   align = "center"/>		
		<el-table-column label="操作" align = "center" >
			<template #default="scope">
				<el-button type="primary" @click="editInit(scope.row)" style="border-radius: 40px;"><el-icon><Edit /> </el-icon> 修改</el-button>
				<el-button   type="danger"  @click="insureDelete(scope.row.id)" style="border-radius: 40px;"><el-icon><Delete /></el-icon> 删除</el-button>
			</template>				
		</el-table-column>
  	  </el-table>
  		  <el-pagination
  		    small
  		    background
  		    layout="prev, pager, next"
  			:page-size="pageSize"
  		    :page-count="pageCount"
  			:current-page="currentPage"
  			@current-change="haddlePageChange"
  		  />
	 
	  <!-- 增加对话框 -->
	  <el-dialog v-model="dialogVisible" title="登记" width="35%" draggable>
	        <!-- <span>增加</span> -->
	  	  <el-form :model="form" label-width="80px" :rules="formRules"  class="demo-ruleForm">
	  		<el-form-item label="宿舍楼">
	  	        <el-select v-model="form.dorm" value-key="building" placeholder="请选择" style="width:100%;" @change="findDorm_no(form.dorm),this.form.dorm_no = null">
	  	          <el-option v-for="item in unique(dormOption)"
	  	        		:key="item.id"
	  	        		:label="item.building"
	  	        		:value="item.building">
	  	        	</el-option>
	  	        </el-select>
	  	      </el-form-item>
	  	      <el-form-item label="宿舍号">
	  	        <el-select v-model="form.dorm_no" value-key="dorm_no" placeholder="请选择" style="width:100%;" :no-data-text="'请先选择宿舍楼'" >
	  	          <el-option v-for="item in dorm_noOption"
	  	        		:key="item.id"
	  	        		:label="item.dorm_no"
	  	        		:value="item.dorm_no">
	  	        	</el-option>
	  	        </el-select>
	  	      </el-form-item>
	  	      <el-form-item label="学号" prop="no">
	  	        <el-input v-model="form.no" />
	  	      </el-form-item>
			  <el-form-item label="姓名" prop="name">
				<el-input v-model="form.name" />
			  </el-form-item>
			  <el-form-item label="报修原因" prop="report_reason">
				<el-input v-model="form.report_reason" />
			  </el-form-item>
			  <el-form-item label="报修时间" prop="report_time">
				<el-date-picker v-model="form.report_time" type="date" placeholder="选择日期时间"  value-format="YYYY-MM-DD" style="width:100%;">
				</el-date-picker>
			  </el-form-item>
			  <el-form-item label="处理状态" prop="handle_sta">
				<el-input v-model="form.handle_sta"  />
			  </el-form-item>
	  	   </el-form>
	        <template #footer>
	          <span class="dialog-footer">
	            <el-button @click="dialogVisible = false">取消</el-button>
	            <el-button type="primary" @click="addSubmit()">提交</el-button
	            >
	          </span>
	        </template>
	      </el-dialog>
		  
	  <!--  修改对话框 -->
	  <el-dialog v-model="editVisible" title="修改" width="35%" draggable @close='getTableData()'>
	    <el-form :model="form" label-width="80px" :rules="formRules"  class="demo-ruleForm">
	    	<el-form-item label="宿舍楼">
	          <el-select v-model="form.dorm" value-key="building" placeholder="请选择" style="width:100%;" @change="findDorm_no(form.dorm),this.form.dorm_no = null">
	            <el-option v-for="item in unique(dormOption)"
	          		:key="item.id"
	          		:label="item.building"
	          		:value="item.building">
	          	</el-option>
	          </el-select>
	        </el-form-item>
	        <el-form-item label="宿舍号">
	          <el-select v-model="form.dorm_no" value-key="dorm_no" placeholder="请选择" style="width:100%; " :no-data-text="'请先选择宿舍楼'">
	            <el-option v-for="item in dorm_noOption"
	          		:key="item.id"
	          		:label="item.dorm_no"
	          		:value="item.dorm_no">
	          	</el-option>
	          </el-select>
	        </el-form-item>
	        <el-form-item label="学号" prop="no">
				<el-input v-model="form.no" />
	        </el-form-item>
			<el-form-item label="姓名" prop="name">
				<el-input v-model="form.name" />
			</el-form-item>
			<el-form-item label="报修原因" prop="report_reason">
				<el-input v-model="form.report_reason" />
			</el-form-item>
			<el-form-item label="报修时间" prop="report_time">
				<el-date-picker v-model="form.report_time" type="date" placeholder="选择日期时间"  value-format="YYYY-MM-DD" style="width:100%;">
				</el-date-picker>
			</el-form-item>
			<el-form-item label="处理状态" prop="handle_sta">
				<el-input v-model="form.handle_sta"  />
			</el-form-item>
	     </el-form>
	      <template #footer>
	        <span class="dialog-footer">
	          <el-button @click="editVisible = false ,getTableData()">取消</el-button>
	          <el-button type="primary" @click="editSubmit()">提交</el-button
	          >
	        </span>
	      </template>
	    </el-dialog>

		<!--  统计图表 -->
	  <el-dialog v-model="echartsVisible" title="统计图表" width="50%" draggable>
		<div id="myChart" style="width:700px; height:450px" ></div>
	      <span class="dialog-footer">
	        <el-button @click="echartsVisible = false" >关闭</el-button>
	       </span>
	  </el-dialog> 	
	  
	  <!--  删除二次确认dialog -->
		<el-dialog v-model="deleteVisible" title="确认删除" width="20%" draggable>
			<p >您确定要删除此数据吗</p>
		    <span class="dialog-footer" style="text-align: center;">
		      <el-button @click="deleteVisible = false"  style="margin-top:15px;">取消</el-button>
			  <el-button type="primary" @click="handleDelete(deleteId)" style="margin-top:15px;">确认</el-button>
		     </span>
		</el-dialog> 

	  <!--  待审核对话框 -->
	  <el-dialog v-model="checkreport" title="待审核报修申请" width="60%" draggable>
		<el-table :data="checkReportData" style="width: 100%" :stripe="true"
				 ref="multipleTable"
					@selection-change="handleSelectionChange"
					:header-cell-style="{background:'#eef1f6',color:'#606266'}"
				 >
			<el-table-column prop="dorm_no" label="宿舍号" sortable width="90"  align = "center"/>
			<el-table-column prop="no" label="学号" sortable  width="90" align = "center"/>
			<el-table-column prop="name" label="姓名"  sortable width="90" align = "center"/>
			<el-table-column prop="dorm" label="宿舍楼" sortable width="90" align = "center" />
			<el-table-column prop="report_time" label="报修时间" width="100" align = "center"/>
			<el-table-column prop="report_reason" label="报修原因"  width="200" align = "center"/>
			<el-table-column label="操作" align = "center" >
				<template #default="scope">
					<el-button type="primary" @click="mangerAgreeReport(scope.row)" >同意</el-button>
					<el-button type="primary" @click="mangerDisAgreeReport(scope.row)" >不同意</el-button>
				</template>				
			</el-table-column>
		 </el-table>
		 <el-pagination small layout="prev, pager, next"
			:page-size="pageSize1"
			:page-count="pageCount1"
			:current-page="currentPages"
			@current-change="haddlePageChange1"  />
	  </el-dialog>
  </div>
</template>

<script setup>
import {ref,toRefs,reactive,onMounted,getCurrentInstance} from 'vue'
	let { proxy } = getCurrentInstance();
	var tableData=ref([]);
	var pageCount=ref(0)
	var pageSize=ref(9)
	var currentPage=ref(1)
	//获取基础数据
	function getTableData(){
		var param = { "pagination": {"pageNo":currentPage.value,"pageSize":pageSize.value}, "conditionList":[]};
		var jsonparam = JSON.stringify(param) 
	    proxy.$http.post("ReportRepairFindAll",jsonparam)
		.then(res => {
			tableData.value=res.data.records;
			pageCount.value=Math.ceil(res.data.totalNum/pageSize.value);
		})
		.catch(err => {
			console.log(err)
		});
	}
	//进入页面时获取数据
	onMounted(()=>{
		getTableData()
		
	});
	//点击改变页码时，当前页改变，根据新的URL参数重新获取后台数据
	function haddlePageChange(currentpage){			
		currentPage.value=currentpage;
		getTableData();		
	}
	
	let dormOption=ref([]);
	let dorm_noOption=ref([]);
	let form=ref({});
	const dialogVisible = ref(false)
	//获取增加中的下拉数据
	function addInit(){
		dorm_noOption.value = null
		form.value={}
		dialogVisible.value = true
		var pageSize=ref(100000)
		var currentPage=ref(1)
		var param = { "pagination": {"pageNo":currentPage.value,"pageSize":pageSize.value}, "conditionList":[]};
		var jsonparam = JSON.stringify(param) 
		proxy.$http.post("/DormitoryManagementFindAll",jsonparam)
		.then(res => {
			 dormOption.value=unique(res.data.records) ;
		})
	}
	//根据第一层下拉选择的宿舍楼获得相应的宿舍号
	function findDorm_no(dorm){
		proxy.$http.get("/Dorm_noFindByDorm"+'?dorm='+dorm)
		.then(res => {
			 dorm_noOption.value=res.data.records;
		})
	}
	//增加数据提交
	function addSubmit(){
		proxy.$http.post("/ReportRepairAdd",form.value)
		.then(res => {
			dialogVisible.value = false 
			getTableData();  
			form.value={}  
			alert(res.data.message)
		})
	}
	//查看报修申请的page设置
	var checkReportData=ref([]);
	const checkreport = ref(false)
	var pageCount1=ref(0)
	var pageSize1=ref(6)
	var currentPages=ref(1)
	//获取待审核申请数据
	function checkReport(){
		checkreport.value=true
		var param = { "pagination": {"pageNo":currentPages.value,"pageSize":pageSize1.value}, "conditionList":[]};
		var jsonparam = JSON.stringify(param) 
	    proxy.$http.post("/ReportRepairMangerCheckReport",jsonparam)
		.then(res => {
			checkReportData.value=res.data.records;
			pageCount1.value=Math.ceil(res.data.totalNum/pageSize1.value);
		})
		.catch(err => {
			console.log(err)
		});
	}
	//点击改变页码时，当前页改变，根据新的URL参数重新获取后台数据
	function haddlePageChange1(currentpages){			
		currentPages.value=currentpages;
		checkReport();		
	}
	
	let editVisible=ref(false)
	//获取编辑时的下拉数据
	const editInit = (row) => {
		editVisible.value = true
		dorm_noOption.value = null
		form.value=row
		var pageSize=ref(100000)
		var currentPage=ref(1)
		var param = { "pagination": {"pageNo":currentPage.value,"pageSize":pageSize.value}, "conditionList":[]};
		var jsonparam = JSON.stringify(param) 
		proxy.$http.post("/DormitoryManagementFindAll",jsonparam)
		.then(res => {
			dormOption.value=res.data.records;
		})
		
	}
	//编辑数据提交
	const editSubmit=()=>{
		proxy.$http.post("/ReportRepairUpdate",form.value)
		.then(res => {
			editVisible.value = false	
			getTableData();  
			form.value={}  
			alert(res.data.message)	
		})
	}
	let deleteVisible=ref(false)
	var deleteId = ref()
	//删除二次确认
	const insureDelete = (id) => {
		deleteVisible.value = true
		deleteId.value = id
	}
	//提交删除
	const handleDelete = (id) => {
	  proxy.$http.get('/ReportRepairDelete'+'?id='+id)
	  .then(res => {
		deleteVisible.value = false
	  	alert(res.data.message)
		getTableData();
	  })
	}
	
	let multipleSelection=ref([]);
	const handleSelectionChange=(val)=>{ //批量选择
		multipleSelection.value = val;
	}
	//批量删除
	function deleteBatch(){
		if(multipleSelection.value){
			proxy.$http.post('/ReportRepairDeleteInBatch',multipleSelection.value)
			.then(res => {			
				getTableData();  
				alert(res.data.message)
			})
		}
		
	}
	//宿管同意报修申请
	const mangerAgreeReport = (row) => {
		form.value=row
		proxy.$http.post("/ReportRepairManagerAgreeReport",form.value)
		.then(res => {
			checkReport();  //更新表格数据
			getTableData();
			alert(res.data.message)
		})
	}
	//宿管不同意报修申请
	const mangerDisAgreeReport = (row) => {
		form.value=row
		proxy.$http.post("/ReportRepairManagerDisAgreeReport",form.value)
		.then(res => {
			checkReport();  //更新表格数据
			getTableData();
			alert(res.data.message)
		})
	}
	
	//按关键字查询
	const keyword=ref('')
	let search=()=>{
		if(keyword.value=='')
			keyword.value=null
		var param = { "pagination": {"pageNo":currentPage.value,"pageSize":pageSize.value}, "conditionList":[
	    {"value":keyword.value,"key":"姓名","operator":"like"},
		]};
		var jsonparam = JSON.stringify(param) 
		proxy.$http.post("ReportRepairFindAll",jsonparam)
		.then(res => {
			tableData.value=res.data.records;
			pageCount.value=Math.ceil(res.data.totalNum/pageSize.value);
			keyword.value==''
			if(res.data.totalNum ==0 && keyword.value !=null)
			alert(res.data.message)
		})
		.catch(err => {
			console.log(err)
		});
	}
	
	//判断数字是否符合要求
	const isNum = (rule, value, callback) => {
		const no = /^[0-9]*$/
		 if(value.length<12||value.length>12)
			callback(new Error('学号数字个数应为12'))
		else if (!no.test(value)) {
			callback(new Error('请输入数字!'))
		} else {
			callback()
		}	  
	};
	//表单效验规则
	const formRules = reactive({
		no: [
			{required: true, message: '请输入学号', trigger: 'blur'},
		  {validator: isNum, trigger: 'blur'}  // validator是指用isNum方法做校验，可全部都用方法校验
		],
		name: [
		  {required: true, message: '请输入姓名', trigger: 'blur'},
		  {min: 2, max: 5, message: '长度在 2 到 5 个字符', trigger: 'blur'}
		],
		report_reason:[
			{required: true, message: '请输入报修原因', trigger: 'blur'},
		  {min: 1, max: 50, message: '请保持在50个字符以内', trigger: 'blur'}
		],
		report_time:[
			{required: true, message: '请选择报修时间', trigger: 'blur'},
		],
	})
	
	import * as echarts from 'echarts'
	let echartsVisible=ref(false)
	let Data = {}
	let arrLength=0;
	function echartsBar(){
		echartsVisible.value=true
		//构建图表数据
		Data={values:[],name:[]} //图表显示名称及统计数字
		var pageSize=ref(100000)
		var currentPage=ref(1)
		var param = { "pagination": {"pageNo":currentPage.value,"pageSize":pageSize.value}, "conditionList":[]};
		var jsonparam = JSON.stringify(param) 
		proxy.$http.post("/DormitoryManagementFindAll",jsonparam)
		.then(res => {
			unique(res.data.records).forEach((item,index)=>{
				//请求宿舍楼
				proxy.$http.get('/ReportRepairFindByDorm?dorm='+item.building)
				 .then((response) => {
					Data.name.push(item.building);
					Data.values.push(response.data.records.length);
						draw()					
				})							
			});
		})
	}
	//画出统计图表
	function draw(){
		let myChart = echarts.init(document.getElementById("myChart"));
		var getData = [];
		 for(let i=0; i<Data.values.length; i++) {
			var obj = new Object();
			obj.name = Data.name[i];
			obj.value = Data.values[i];
			getData[i] = obj;
		}
		myChart.setOption({
			title: {
				text: "每个宿舍楼的报修数量",
				bottom:"10%",
				left:"38%",
			},
			legend: {
				orient: 'vertical',
				left: 'left',
				data: Data.name
			},
			label: {
			  show: true,
			  formatter: "{b} : {c} ({d}%)" // b代表名称，c代表对应值，d代表百分比
			},
			series: [{
				name: "报修数:",
				type: "pie",
				radius: '55%',
				data:getData,
			}, ],
		});
	}
	//把集合里相同的数据去除
	function unique(arr) {
	  const res = new Map();
	  return arr.filter((arr) => !res.has(arr.building) && res.set(arr.building, 1));
	}
</script>
//分页居中显示
<style scoped>
  .el-pagination {
	justify-content: center;
  }
</style>